<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :before-close="handleClose"
    size="40%"
  >
    <div class="demo-drawer__content">
      <el-form ref="addForm" :model="formData" :rules="rules" inline class="demo-ruleForm" label-position="top">
        <el-row type="flex" justify="space-between">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入" />
          </el-form-item>
          <el-form-item prop="cate_id" label="文章分类">
            <el-select v-model="formData.cate_id" placeholder="请选择">
              <el-option v-for="item in mm" :key="item.id" :label="item.catename" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-form-item label="文章状态">
            <el-radio v-model="formData.status" :label="nmn.one">隐藏</el-radio>
            <el-radio v-model="formData.status" :label="nmn.two">显示</el-radio>
          </el-form-item>

          <el-form-item label="文章封面">
            <uploadImg ref="uploadUmage" :seeimage2="seeimage1" @removeUrl="removeUrl" @pushImage="pushImage" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="content" label="活动内容">
            <quillEditor v-model="formData.content" class="plp" style="width:695px" :options="editorOption" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="ppt" />
    <div class="demo-drawer__footer">
      <el-button @click="quxiao">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>
  </el-drawer>
</template>

<script>
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getContentListApi, addArticlePosInfoApi, getArticlePutApi } from '@/api/content_article'

export default {
  components: {
    quillEditor
  },
  props: {
    seeimage1: {
      type: Array,
      default: () => []
    },
    drawer: Boolean
  },
  data() {
    return {

      imgList: [],
      nmn: {
        one: 0,
        two: 1
      },
      mm: [],
      formData: {
        cate_id: '',

        title: '',
        pic_url: '',

        status: 1,
        content: ''
      },
      rules: {
        title: [{ required: true, message: '请输入', trigger: 'blur' }],

        cate_id: [{ required: true, message: '请输入', trigger: 'blur' }],
        content: [{ required: true, message: '请输入', trigger: 'blur' }]

      },
      editorOption: {
        modules: {

          toolbar: [
            [{ size: ['small', false, 'large', 'huge'] }],
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
            [{ align: [] }], // 对齐方式-----[{ align: [] }]

            [{ font: [] }],
            [{ direction: 'ltl' }], // 文本方向-----[{'direction': 'rtl'}]
            [{ direction: 'rtl' }] // 文本方向-----[{'direction': 'rtl'}]

          ]
        }
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改广告信息' : '新增广告信息'
    }
  },
  created() {
    this.initData1()
  },
  methods: {
    handleClose() {
      this.formData = {
        cate_id: '',

        title: '',
        pic_url: '',

        status: 1,
        content: ''
      }
      this.imgList = []
      this.$refs.uploadUmage.fileList = []
      this.$emit('clearImgList')
    },
    async initData1() {
      const res = await getContentListApi()
      console.log('res:', res)
      this.mm = res.data.data
      console.log('mm:', this.mm)
    },
    quxiao() {
      this.handleClose()
    },
    pushImage(url) {
      this.imgList.push(url)
    },
    async onSubmit() {
      console.log(this.formData)
      await this.$refs.addForm.validate()
      this.formData.pic_url = this.imgList.join(',')
      this.formData.id ? await getArticlePutApi(this.formData, this.formData.id) : await addArticlePosInfoApi(this.formData)
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      this.handleClose()
      this.$emit('updateList')
    },
    removeUrl(url) {
      console.log(url)
      this.imgList = this.imgList.filter(item => url !== item)
    }

  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  margin-bottom: 0;
  padding: 20px 20px 20px 80px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
  .el-drawer__close-btn{
  position: absolute;
  left: 20px;
}
}
::v-deep .el-drawer__body {
    flex: 1 1;
    min-width: 0;
    min-height: 0;

    overflow: auto;

    position: relative;
    .el-form-item__label{
      padding-bottom: 0;

    }
    .el-input__inner{
     width: 300px;
    }
    .el-form-item__content{
      width: 300px;

    }
    .demo-drawer__content{
      padding: 24px;
    }
    .el-form-item{
      margin-right: 25px;
      .plp{
        line-height: normal;
        .ql-container{
        min-height: 200px;
      }
      }

    }
    // .el-row{
    //   display: flex;
    //   justify-content: round;
    // }
.ppt{
  height: 1px;
  width: 100%;
  background-color: #f0f0f0;
}
  }
 .demo-drawer__footer {
  float: right;
  margin-right: 28px;
  margin-top: 20px;
}
</style>
